<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
         <el-row>
            <el-col :span="6">
               <el-form-item label="Oper IP" prop="operIp"  label-width="120">
                  <el-input
                     v-model="queryParams.operIp"
                     placeholder=" "
                     clearable
                     style="width: 220px;"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="System Model" prop="title" label-width="140">
                  <el-input
                     v-model="queryParams.title"
                     placeholder=""
                     clearable
                     style="width: 220px;"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="Operator" prop="operName" label-width="130">
                  <el-input
                     v-model="queryParams.operName"
                     placeholder=""
                     clearable
                     style="width: 220px;"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
            </el-col>
            <el-col :span="6">
               <el-form-item label="Type" prop="businessType" label-width="120">
                  <el-select
                     v-model="queryParams.businessType"
                     placeholder=""
                     clearable
                     style="width: 200px"
                  >
                     <el-option
                        v-for="dict in sys_oper_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                     />
                  </el-select>
               </el-form-item>
            </el-col>
      
            <el-col :span="12">
               <el-form-item label="Operation Time" label-width="120">
                  <el-date-picker
                     v-model="dateRange"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     type="daterange"
                     range-separator="-"
                     start-placeholder="Start Date"
                     end-placeholder="End date"
                     style="width: 220px"
                     :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                  ></el-date-picker>
               </el-form-item>
               <el-form-item style="margin-left: 20px;">
                  <el-button type="primary" icon="Search" @click="handleQuery">Search</el-button>
                  <el-button icon="Refresh" @click="resetQuery">Reset</el-button>
               </el-form-item>
            </el-col>  
         </el-row> 
      </el-form>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:operlog:remove']"
            >Delete</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               @click="handleClean"
               v-hasPermi="['system:operlog:remove']"
            >Clear</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:operlog:export']"
            >Export</el-button>
         </el-col> 
      </el-row>

      <el-table ref="operlogRef" v-loading="loading" :data="operlogList" :show-overflow-tooltip="true" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
         <el-table-column type="selection" width="50" align="center" />
         <!-- <el-table-column label="OperId" align="center" prop="operId" /> -->
         <el-table-column label="System Model" align="center" prop="title" width="160" />
         <el-table-column label="Oper Type" align="center" prop="businessType">
            <template #default="scope">
               {{ businessTypes[scope.row.businessType] }} 
            </template>
         </el-table-column>
         <el-table-column label="Request Method" align="center" prop="requestMethod" />
         <el-table-column label="Operator" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
         <el-table-column label="Oper IP" align="center" prop="operIp" width="140" :show-overflow-tooltip="true" />
         <el-table-column label="Status" align="center" prop="status">
            <template #default="scope">
               {{ statuss[scope.row.status] }}
            </template>
         </el-table-column>
         <el-table-column label="Operaton Time" :align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
            <template #default="scope">
               <span>{{ parseTime(scope.row.operTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="Cost Time" :align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
            <template #default="scope">
               <span>{{ scope.row.costTime }} ms</span>
            </template>
         </el-table-column>
         <el-table-column label="Operation" :align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['system:operlog:query']">detail</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         :page="queryParams.pageNum"
         :limit="queryParams.pageSize"
         style="float: right"
         @pagination="pageQuery"
      />

      <!-- 操作日志详细 -->
      <el-dialog title="Detail" v-model="open" width="1200px" append-to-body>
         <el-form :model="form" label-width="120px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="Operation Model：">{{ form.title }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item
                    label="Login Info:"
                  >{{ form.operName }} / {{ form.operIp }} 
                 </el-form-item>
               </el-col>    
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="Request Url：">{{ form.operUrl }}</el-form-item> 
               </el-col>
               <el-col :span="12">
                  <el-form-item label="Method：">{{ form.requestMethod }}</el-form-item>
               </el-col>
            </el-row>   
               
            <el-row>
                <el-col :span="24">
                  <el-form-item label="Operation Method：" label-width="140px">{{ form.method }}</el-form-item>
               </el-col>
            </el-row>   
            <el-row>
                <el-col :span="24">
                  <el-form-item label="Request Param" label-width="auto" >{{ form.operParam }}</el-form-item>
               </el-col>
            </el-row>  
             <el-row>
                 <el-col :span="24">
                  <el-form-item label="Result：">{{ form.jsonResult }}</el-form-item>
               </el-col>
             </el-row>  
            <el-row>
                 <el-col :span="8">
                  <el-form-item label="Status：">
                     <div v-if="form.status === 0">Normal</div>
                     <div v-else-if="form.status === 1">Failure</div>
                  </el-form-item>
               </el-col>
                 <el-col :span="7">
                  <el-form-item label="Cost Time：">{{ form.costTime }}ms</el-form-item>
               </el-col>
               <el-col :span="9">
                  <el-form-item label="Operation Time：">{{ parseTime(form.operTime) }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="Error Message：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
               </el-col>
            </el-row>  
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="open = false">Close</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="Operlog">
  import { ref, onMounted, reactive, computed, watch, getCurrentInstance } from "vue";
import { list, delOperlog, cleanOperlog } from "@/api/system/operlog";

const { proxy } = getCurrentInstance();

let sys_oper_type = reactive([])
let statuss =['Success','Failure']
let businessTypes=['','Add','Update','Delete',"Auth","Export","Import","Force"] 
onMounted(async () => {
    
})

const operlogList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0); 
const dateRange = ref([]);
const defaultSort = ref({ prop: "operTime", order: "descending" });

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    operIp: undefined,
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: undefined
  }
});

const { queryParams, form } = toRefs(data);

  
const pageQuery = async (e) => {
   queryParams.value.pageNum = e.page;
   queryParams.value.pageSize = e.limit; 
   getList()
};

/** 查询登录日志 */
function getList() {
  loading.value = true;
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    operlogList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}

/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order);
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.operId);
  multiple.value = !selection.length;
}

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop;
  queryParams.value.isAsc = column.order;
  getList();
}

/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
}

/** 删除按钮操作 */
function handleDelete(row) {
  const operIds = row.operId || ids.value;
  proxy.$modal.confirm("Confirm to to remove?").then(function () {
    return delOperlog(operIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("Remove Success");
  }).catch(() => {});
}

/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm("Confirm to clear the log?").then(function () {
    return cleanOperlog();
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("clear success");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/operlog/export",{
    ...queryParams.value,
  }, `config_${new Date().getTime()}.xlsx`);
}

getList();
</script>
